Legend Display Options

The Chart and PieChart controls display a legend to the right of the chart, helping users to identify the different data items displayed.

In the Chart control, the legend provides a caption for each displayed data series. The exception is if you are using a BarSeries and set the ShowAllLegendItems property to True, in which case the legend provides a caption for each data item (bar).

In the PieChart control, the legend provides a caption for each data item (slice of the pie).

Legend Position

To change the display position of the legend, set the Chart.LegendPosition or PieChart.LegendPosition property.

<ms:Chart LegendPosition="Left" />

Hiding the Legend

To hide the legend, set LegendPosition to None.

Legend Text

In the Chart control, the default legend text for each data series is “Series n”. To override this, set the series’ Title.

<ms:BarSeries Title="Predicted" SeriesBrush="Black" />
<ms:BarSeries Title="Actual" SeriesBrush="Red" />

In the PieChart control, or when using a BarSeries with ShowAllLegendItems set to True, the default legend text for each item is “Item n”. To override this, set the TitleBinding on the PieSeries or BarSeries.

<ms:PieChart>
  <ms:PieSeries ItemsSource="{Binding}" 
                DataBinding="{Binding Amount}" 
                TitleBinding="{Binding RegionName}" />
</ms:PieChart>

Customizing the Appearance of the Legend

The appearance of the legend box can be customized using the LegendStyle property. The target type of the style should be Legend. Legend is a HeaderedItemsControl: the Header is the legend title and the ItemsSource contains the legend entries in the form of LegendItem objects: use the LegendIconBrush to get the brush used for the item, and LegendLabel to get the item text.

<ms:Chart Width="600" Height="400" LegendPosition="Top">
  <ms:Chart.LegendStyle>
    <Style TargetType="ms:Legend">
      <Setter Property="BorderBrush" Value="Black" />
      <Setter Property="Background" Value="Silver" />
      <Setter Property="Header" Value="Chart Key" />
      <Setter Property="ItemTemplate">
        <Setter.Value>
          <DataTemplate>
            <StackPanel Margin="4,0,4,0">
              <Ellipse Fill="{Binding LegendIconBrush}" 
                       Width="8" Height="8" 
                       Stroke="Black" 
                       HorizontalAlignment="Center" 
                       />
              <TextBlock Text="{Binding LegendLabel}" 
                         TextAlignment="Center" 
                         FontStyle="Italic" 
                         />
            </StackPanel>
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:Chart.LegendStyle>
</ms:Chart>

The appearance of legend icons (the color swatches shown next to the legend text) can be customized using the LegendIconTemplate property. The data context of the template is a LegendItem: use the LegendIconBrush to get the default item brush.

<ms:BarSeries>
  <ms:BarSeries.LegendIconTemplate>
    <DataTemplate>
      <Ellipse Fill="{Binding LegendIconBrush}" 
               Width="8" Height="8" 
               Stroke="Black" 
               />
    </DataTemplate>
  </ms:BarSeries.LegendIconTemplate>
</ms:BarSeries>

Title Display Options

To display a title on a chart, set the Title property. The title is displayed centred at the top of the chart control, above the chart itself.

To customize the display of the title, set the TitleTemplate property. The data context of the template is the title text.

<ms:Chart Title="Bar Chart" Width="600" Height="400">
  <ms:Chart.TitleTemplate>
    <DataTemplate>
      <Border BorderBrush="Red" BorderThickness="2" 
              CornerRadius="8" Padding="16" 
              Background="LightCoral">
        <TextBlock Text="{Binding}" FontSize="48" 
                   TextAlignment="Center" 
                   />
      </Border>
    </DataTemplate>
  </ms:Chart.TitleTemplate>
</ms:Chart>

Send comments on this topic to contact@mindscape.co.nz

(c) 2010 Mindscape Limited